﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>
    <section>
      <h2>正在进行/待办 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box">
        <li>
          <input type="checkbox" />
          <p>测试</p>
          <a href="javascript:;"></a>
        </li>
      </ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist">
        <li>
          <input type="checkbox" />
          <p>吃饭</p>
          <a href="javascript:;"></a>
        </li>
      </ul>
    </section>
    <footer></footer>

    <script>
      //获取数据
      const title = document.querySelector('#title')
      const todolist = document.querySelector('#todolist')
      const donelist = document.querySelector('#donelist')
      const todocount = document.querySelector('#todocount')
      const donecount = document.querySelector('#donecount')

      //给输入框绑定事件
      title.addEventListener('keydown', function (e) {
        //为回车键的时候
        if (e.keyCode === 13) {
          //获取本地数据
          let arr1 = JSON.parse(localStorage.getItem('arr1')) || []
          let arr2 = JSON.parse(localStorage.getItem('arr2')) || []
          //非空判断
          if(title.value === ''){
           return alert('输入内容不能为空')
          }
          //arr1里面追加一项
          arr1.push(title.value)
          //清空input框内容
          title.value = ''
          localStorage.setItem('arr1', JSON.stringify(arr1))
          render()
        }
      })

      function render() {
        let arr1 = JSON.parse(localStorage.getItem('arr1')) || []
        let arr2 = JSON.parse(localStorage.getItem('arr2')) || []
        todolist.innerHTML = arr1
          .map((item, index) => {
            return `
          <li>
          <input type="checkbox" data-index=${index} />
          <p>${item}</p>
          <a href="javascript:;" data-index=${index}></a>
        </li>
          `
          })
          .join('')
        todocount.innerHTML = arr1.length
        donelist.innerHTML = arr2
          .map((item, index) => {
            return `
          <li>
          <input type="checkbox" checked data-index=${index} />
          <p>${item}</p>
          <a href="javascript:;" data-index=${index}></a>
        </li>
          `
          })
          .join('')
        donecount.innerHTML = arr2.length
      }
      render()
      //勾选 把那一项放到另一栏里面
      todolist.addEventListener('click', function (e) {
        
        if (e.target.tagName === 'INPUT') {
          let arr1 = JSON.parse(localStorage.getItem('arr1')) || []
          let arr2 = JSON.parse(localStorage.getItem('arr2')) || []
          const index = e.target.dataset.index
          //splice 的返回值 是删除的那一项
          const item = arr1.splice(index, 1)
          //arr2里面追加这一项
          arr2.push(item)
          localStorage.setItem('arr1', JSON.stringify(arr1))
          localStorage.setItem('arr2', JSON.stringify(arr2))
          render()
        }
      })
      donelist.addEventListener('click', function (e) {
        if (e.target.tagName === 'INPUT') {
          let arr1 = JSON.parse(localStorage.getItem('arr1')) || []
          let arr2 = JSON.parse(localStorage.getItem('arr2')) || []
          const index = e.target.dataset.index
          const item = arr2.splice(index, 1)
          arr1.push(item)
          localStorage.setItem('arr1', JSON.stringify(arr1))
          localStorage.setItem('arr2', JSON.stringify(arr2))
          render()
        }
      })

      //删除
      todolist.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
          let arr1 = JSON.parse(localStorage.getItem('arr1')) || []
          const index = e.target.dataset.index
          arr1.splice(index, 1)
          localStorage.setItem('arr1', JSON.stringify(arr1))
          render()
        }
      })
      donelist.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
          let arr2 = JSON.parse(localStorage.getItem('arr2')) || []
          const index = e.target.dataset.index
          arr2.splice(index, 1)
          localStorage.setItem('arr2', JSON.stringify(arr2))
          render()
        }
      })
    </script>
  </body>
</html>
